<template>
  <div v-if="type===0"
       class="boxStyle">
    <van-checkbox-group direction="horizontal"
                        v-model="result">
      <van-checkbox name="a">
        <template #icon="props">
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-if="props.checked"
                      color="red">MRP计划生产</van-button>
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-else>MRP计划生产</van-button>
        </template>
      </van-checkbox>
      <van-checkbox name="b">
        <template #icon="props">
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-if="props.checked"
                      color="red">进销存</van-button>
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-else>进销存</van-button>
        </template>
      </van-checkbox>
      <van-checkbox name="c">
        <template #icon="props">
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-if="props.checked"
                      color="red">V23</van-button>
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-else>V23</van-button>
        </template>
      </van-checkbox>
      <van-checkbox name="d">
        <template #icon="props">
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-if="props.checked"
                      color="red">制程管理</van-button>
          <van-button size="small"
                      plain
                      hairline
                      round
                      v-else>制程管理</van-button>
        </template>
      </van-checkbox>
    </van-checkbox-group>
  </div>
  <div v-else-if="type===1"
       class="boxStyle">
    <div>
      <van-row>
        <van-col span="12"> <span class="text">服务期限</span></van-col>
        <van-col span="12">
          <van-stepper v-model="viability"
                       min="1"
                       max="8" />
        </van-col>
      </van-row>

    </div>
  </div>
  <div v-else-if="type===2"
       class="boxStyle">
    <div>
      <van-row>
        <van-col span="12"> <span class="text">模块</span></van-col>
        <van-col span="12"> <span class="text">用户数</span></van-col>
      </van-row>
      <van-row>
        <van-col class="Stepper"
                 span="12">
          <van-checkbox-group v-model="result">
            <van-checkbox name="a">
              <template #icon="props">
                <van-button size="small"
                            plain
                            class="moduleMrgin"
                            hairline
                            v-if="props.checked"
                            color="red">制程管理</van-button>
                <van-button size="small"
                            plain
                            class="moduleMrgin"
                            hairline
                            v-else>制程管理</van-button>
              </template>
            </van-checkbox>
            <van-checkbox name="b">
              <template #icon="props">
                <van-button size="small"
                            plain
                            class="moduleMrgin"
                            hairline
                            v-if="props.checked"
                            color="red">进销存</van-button>
                <van-button size="small"
                            plain
                            class="moduleMrgin"
                            hairline
                            v-else>进销存</van-button>
              </template>
            </van-checkbox>
          </van-checkbox-group>
        </van-col>
        <van-col span="12">
          <van-stepper v-model="viability"
                       class="Stepper"
                       min="1"
                       max="8" />
          <van-stepper v-model="viability"
                       min="1"
                       max="8" />
        </van-col>
      </van-row>

    </div>
  </div>
  <div v-else-if="type===3"
       class="boxStyle">
    <!-- <van-image width="100"
               height="100"
               :src="clean" /> -->
  </div>
</template>

<script>
import clean from '@/assets/icon/svg/timeStop.svg'
export default {
  props: ['type'],
  data () {
    return {
      clean: clean,
      radio: '专户',
      viability: 1,
      kk: '',
      checkbox: false,
      checkboxGroup: [],
      result: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    onSubmit () {
      console.log('kk')
    }
  }
}
</script>

<style style lang="less" scoped>
.footer {
  // display: flex;
  // position: fixed;
  margin-top: 230px;
  height: 50px;
  background-color: #adadad;
  position: absolute;
  bottom: 0;
  left: 0;
}
/deep/ .van-radio__icon {
  height: 100%;
}
/deep/.van-checkbox__icon {
  height: 100%;
}
.van-checkbox-group--horizontal {
  margin: 10px;
}
.boxStyle {
  position: relative;
  height: 335px;
  background-color: #fff;
  .text {
    font-size: 16px;
  }
  .selectStyle {
    margin-right: 30px;
  }
  .moduleMrgin {
    margin: 0px 0 0 58px;
  }
  .Stepper {
    margin-top: 30px;
  }
}
.submit {
  margin-top: 100px;
}
</style>